<script lang="ts" setup>
import { onMounted } from 'vue';

import { storeToRefs } from 'pinia';

import { doudianStore, in1688ToDoudianStore } from '#/store/modules';

import EditDetailItem from './editDetailItem.vue';

const doudianStoreModel = doudianStore();

const in1688ToDoudian = in1688ToDoudianStore();

const onEdit = (targetKey: string) => {
  in1688ToDoudian.removeTab(targetKey);
};
onMounted(() => {
  doudianStoreModel.getDoudianCategoryFunc(0);
});

const { shopTabs } = storeToRefs(in1688ToDoudian);
</script>
<template>
  <a-tabs
    v-model:active-key="in1688ToDoudian.nowSelectTab"
    hide-add
    type="editable-card"
    @edit="onEdit"
  >
    <a-tab-pane
      v-for="pane in shopTabs"
      :key="pane.shopId"
      :closable="pane.closable"
      :tab="pane.shopName"
    >
      <div v-for="(item, index) in pane.productDetailList" :key="item.offerId">
        <!-- {{ item.goodsTitle }} 这里加一个修改单个详情的地方 -->
        <EditDetailItem v-model="pane.productDetailList[index]" :item="item" />
      </div>
    </a-tab-pane>
  </a-tabs>
</template>
